<template>
  <Row class="header-bar-wrapper">
    <div :class="['collapsed',{'collapsed-min':collapsed}]" @click="handleCollapsedChange"><Icon type="md-menu" size="24"/></div>
    <div class="header-menu">
      <router-link min-hidden to="/home">首页</router-link>
      <span min-hidden v-for="item,index of historyPage" :key="`history-page-${index}`" >{{item}}</span>
      <span min-show class="min-title">{{historyPage[historyPage.length-1] || "首页"}}</span>
    </div>
    <div class="custom-content-con">
      <Icon min-hidden :type="fullScreen?'md-contract':'md-expand'" size="20" @click="toggleFullScreen" />
      <Icon min-hidden :type="theme=='dark'?'md-sunny':'md-moon'" size="20" @click="changeTheme" />
      <p class="userInfo">&nbsp;<Avatar style="color: #f56a00;background-color: #fde3cf">{{userName.slice(0,1).toUpperCase() || "U"}}</Avatar>&nbsp;&nbsp;{{userName}}</p>
      <Button icon="ios-log-out" type="text" @click="goLink()">退出</Button>
    </div>
  </Row>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "headerBar",
  data() {
    return {
      fullScreen: false
    };
  },
  props: ["collapsed", "historyPage", "theme"],
  computed:{
    ...mapState({
       userName: (state) => state.user.userName
    })
  },
  created() {},
  methods: {
    toggleFullScreen() {
      if (!document.fullscreenElement && // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        this.fullScreen = true;
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        this.fullScreen = false;
      }
    },
    handleCollapsedChange() {
      this.$emit("collapsed", !this.collapsed);
    },
    goLink() {
      this.$store.dispatch('user/logOut').then(() => {
          location.href = ''
      })
    },
    changeTheme() {
      this.$store.commit('other/CHANGE_THEME')
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.header-bar-wrapper {
  background: #fff;
  height: 56px;
  width: 100%;
  position: relative;
  z-index: 99;
  box-shadow: 0 1px 5px 0 #e7e7e7;
  .collapsed {
    line-height: 56px;
    padding: 2px 20px 0;
    cursor: pointer;
    transform-origin: center;
    float: left;
    &.collapsed-min i {
      transform: rotate(90deg);
    }
  }
  .header-menu {
    & > * {
      vertical-align: middle;
      line-height: 56px;
      display: inline-block;
      margin-right: 10px;
      color: #999;
      &:first-child {
        float: left;
        color: #515a6e;
      }
      &:not(a):not(.min-title) {
        float: left;
        &::before {
          content: '/';
          color: #dcdee2;
          margin-right: 10px;
        }
        &:last-child {
          color: #515a6e;
          font-weight: 700;
        }
      }
    }
    a img {
      display: block;
      margin-right: 72px;
    }
    p {
      margin: 0 15px;
      font-size: 16px;
      font-weight: 600;
      position: relative;
      cursor: pointer;
      color: var(--header-title);
      &.checked {
        color: var(--header-active-bg);
        &::after {
          content: "";
          width: 100%;
          height: 2px;
          background-color: var(--header-active-bg);
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
  }
  .custom-content-con {
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    & > * {
      padding: 0 10px;
      height: 100%;
      display: flex;
      align-items: center;
      &:not(.userInfo) {
        cursor: pointer;
        line-height: 56px;
        &:hover {
          background-color: #f8f8f9;
        }
      }
    }
    .ivu-btn {
      margin-left: 10px;
      position: relative;
      background-color: transparent;
      &::after {
        content: "";
        width: 13px;
        height: 13px;
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
